<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表</title>
	</head>
	<body>
		<div id="app" align="center">
			
			<h1>添加用户:</h1>
			<span>姓名: <input type="text" v-model="addUser.name"></span>
			<span>年龄: <input type="text" v-model="addUser.age"></span>
			<span>性别: <input type="text" v-model="addUser.sex"></span>
			<button type="button" @click="addUserBtn">添加用户</button>
			
			<hr />
			
			<h1>修改用户:</h1>
			<span>姓名: <input type="text" v-model="updateUser.id" disabled></span>
			<span>姓名: <input type="text" v-model="updateUser.name"></span>
			<span>年龄: <input type="text" v-model="updateUser.age"></span>
			<span>性别: <input type="text" v-model="updateUser.sex"></span>
			<button type="button" @click="updateUserBtn">修改用户</button>
			
			<hr />
			
			<table border="1px" cellspacing="0" width="80%">
				<tr><th colspan="5"><h1>用户列表</h1></th></tr>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="user in userList" align="center">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="updateBtn(user)">修改</button>
						<button @click="deleteUserBtn(user.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:8090";
			const app = new Vue({
				el: '#app',
				data: {
					userList: [],
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					async getUserList(){
						let {data: result} = await axios.get("/findAll")
						this.userList = result
					},
					async deleteUserBtn(id){
						let {data: result} = await axios.delete(`/deleteUserById/${id}`)
						/* let {data: result} = await axios.delete("/deleteUserById",
							{params: id}
						) */
						console.log(result)
						this.getUserList()
					},
					async addUserBtn(){
						let {data: result} = await axios.post("/insertUser", this.addUser)
						console.log(result)
						this.getUserList()
					},
					updateBtn(user){
						this.updateUser = user;
					},
					async updateUserBtn(){
						let {data: result} = await axios.put("/updateUser", this.updateUser)
						console.log(result)
					}
					
				},
				mounted() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
